<template>
  <div class="personalData">
    <van-nav-bar
      title="个人资料"
      left-text="返回"
      right-text="保存"
      :fixed="true"
      left-arrow
      @click-left="back"
      @click-right="preservation"
    ></van-nav-bar>
    <van-cell-group>
      <van-cell title="头像" size="large">
        <div class="cell">
          <van-image
            class="van-image"
            width="50"
            height="50"
            :src="userInfo.userImg"
          />
          <div class="van-uploader">
            <van-uploader :after-read="afterRead" preview-size="50" center />
          </div>
        </div>
      </van-cell>
      <van-field v-model="userInfo.nickName" label="昵称" />
      <van-field v-model="userInfo.phone" label="手机号" />
      <van-field v-model="userInfo.userId" label="ID" />
    </van-cell-group>
    <van-button class="btn" round type="primary" color="#0022ab" size="large" @click="signOut"
      >退出登录</van-button
    >
  </div>
</template>

<script>
export default {
  name: "PersonalData",
  data() {
    return {
      userInfo: {
        nickName: "",
        phone: "",
        userId: "",
        userImg: "",
      },
    };
  },
  created() {
    this.getPersonalData();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    afterRead() {},
    getPersonalData() {
      this.axios({
        method: "get",
        url: "/findAccountInfo",
      }).then((result) => {

        this.userInfo = result.data.result[0];

      });
    },
    updateNickName() {
      this.axios({
        method: "post",
        url: "/updateNickName",
        data: {
          nickName: this.userInfo.nickName,
        },
      }).then((result) => {

      });
    },
    afterRead(file) {


      let imgType = file.file.type.split("/")[1];

      let serverBase64Img = file.content.replace(
        /data:image\/[A-Za-z]+;base64,/,
        ""
      );

      this.axios({
        method: "post",
        url: "/updateAvatar",
        data: {
          imgType,
          serverBase64Img,
        },
      }).then((result) => {

        if (result.data.code == "H001") {
          this.userInfo.userImg = result.data.result.userImg;
        }
      });
    },
    preservation() {
      this.updateNickName();
    },
    signOut() {
      this.$dialog
        .confirm({
          title: "你确认要退出吗",
        })
        .then(() => {
          this.axios({
            method: "post",
            url: "/logout",
          }).then((result) => {
            this.$router.go(-1)
          });
          localStorage.clear()
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.personalData {
  padding-top: 76px;
  .van-nav-bar--fixed{
    padding-top: 30px;
    background-color: #0022ab;
  }
  /deep/.van-nav-bar__title{
    color: #fff;
  }
  /deep/.van-icon{
    color: #fff;
  }
  /deep/.van-nav-bar__text{
    color: #fff;
  }
  .cell {
    position: relative;
    height: 50px;
    .van-image {
      position: absolute;
      right: 8px;
    }
    .van-uploader {
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0;
    }
  }
  .btn {
    margin: 10px 5% 0;
    width: 90%;
  }
}
</style>